<template>
  <div class="wrap auditContent appointmentContent">
    <div class="search">
      <el-form :inline="true" :model="dataForm" ref="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item label="注册号" prop="registryCode">
          <el-input
            class="auditInput"
            size="small"
            v-model.trim="dataForm.registryCode"
            placeholder="请输入注册号"
          ></el-input>
        </el-form-item>
        <el-form-item label="业务类别" prop="name">
          <el-select v-model="dataForm.name" placeholder="请选择">
            <div  v-for='(item, index) in name' :key="index">
              <el-option :label="item.name" :value="item.id"></el-option>
            </div>
          </el-select>
        </el-form-item>

        <el-form-item label="办理人" prop="username">
          <el-input size="small" v-model.trim="dataForm.username" placeholder="搜索办理人"></el-input>
        </el-form-item>
         <el-form-item label="省份" prop="province">
          <el-input size="small" v-model.trim="dataForm.province" placeholder="搜索省份"></el-input>
        </el-form-item>
         <el-form-item label="城市" prop="area">
          <el-input size="small" v-model.trim="dataForm.area" placeholder="搜索城市"></el-input>
        </el-form-item>

        <el-form-item>
          <!-- icon="el-icon-search" -->
          <el-button size="small" type="primary" @click="getDataList()">搜索</el-button>
          <!-- icon="el-icon-refresh" -->
          <el-button
            size="small"
            type="info"
            style="margin-left:15px"
            @click="resetForm('dataForm')"
          >重置</el-button>
          <el-button size="small" type="success" @click="importDataList()">导出Excel</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="list">
      <el-table
        class="table"
        :data="dataList.slice((pageNum-1)*pageSize,pageNum*pageSize)"
        style="width: 100%;"
      >
        <el-table-column align="center" prop="registryCode" label="注册号"></el-table-column>
        <el-table-column align="center" prop="username" label="办理人"></el-table-column>
        <el-table-column align="center" prop="name" width="200" label="业务类型"></el-table-column>
        <el-table-column align="center" prop="appName" label="申请人"></el-table-column>
        <el-table-column align="center" prop="area" width="200" label="地区"></el-table-column>
        <el-table-column align="center" prop="oderNum" width="200" label="办理数量"></el-table-column>
        <el-table-column align="center" prop="orderStatus" width="200" label="办理状态"></el-table-column>
        <el-table-column align="center" prop="orderDate" label="办理日期"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
      <!-- </div> -->
    </div>
  </div>
</template>
<script>
import timeScope from "../../components/wDate";
import {
  getissued,
  getnotued,
  getPagedata,
  outExcel,
  grantbook,
  deleteone,
  batchdeletebook,
  batchmoresearch,
  outExcelgetdataids,
  getbathdata,
  updatadata,
  getList,
  getExport,
} from "../../api/datastac";
export default {
  data() {
    return {
      // 页每页数据
      pageSize: 10,
      // 当前页
      pageNum: 1,
      // 总数量
      total: 0,
      // 搜索条件
      orderStatus: "",
      dataForm: {
        registryCode: "",
        username: "",
        province:"",
        area:"",
        name: null,
      },
      pagedto: {
        pageSize: 10,
        pageNum: 1,
      },
      dataList: [],
      name:[],
    };
  },

  methods: {
    
    findAllName(){
       this.$http.post('/trademark/outletStatistics/findAllName').then(res => {
         console.log(res)
            this.name = res.data.data;
            console.log(this.name)
        })
    },
    //重置
    resetForm(formName) {
      let newstart = this.dataForm.commitStatus;
      this.$refs[formName].resetFields();
      this.dataForm.area = "";
    },
    getDataList() {
      let datble = [];
      getList(this.dataForm, this.pagedto).then((result) => {
        // console.log(result);
        if (result.data.code != 200) return;
        this.total = result.data.data.total;
        let data = result.data.data.list;
        datble = data.map((item) => {
          // let timer = new Date(item.orderDate);
          // item.orderDate = `${timer.getFullYear()}-${
          //   timer.getMonth() + 1
          // }-${timer.getDate()}`;
          if (item.orderStatus == 1) {
            item.orderStatus = "预约成功";
          } else if (item.orderStatus == 2) {
            item.orderStatus = "已办结";
          } else if (item.orderStatus == 3) {
            item.orderStatus = "跳过";
          }
          return item;
        });
        this.dataList = datble;
      });
    },
    //导出excel
    importDataList() {
      this.$confirm("此操作将导出数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          getExport(this.dataForm).then((res) => {
            // console.log(res);
            //此处有个坑。这里用content保存文件流，最初是content=res，但下载的test.xls里的内容如下图1，
            //检查了下才发现，后端对文件流做了一层封装，所以将content指向res.data即可
            //另外，流的转储属于浅拷贝，所以此处的content转储仅仅是便于理解，并没有实际作用=_=
            const content = res.data;
            const blob = new Blob([content]); //构造一个blob对象来处理数据
            const fileName = "网点状况统计汇总表.xls";
            //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
            //IE10以上支持blob但是依然不支持download
            if ("download" in document.createElement("a")) {
              //支持a标签download的浏览器
              const link = document.createElement("a"); //创建a标签
              link.download = fileName; //a标签添加属性
              link.style.display = "none";
              link.href = URL.createObjectURL(blob);
              document.body.appendChild(link);
              link.click(); //执行下载
              URL.revokeObjectURL(link.href); //释放url
              document.body.removeChild(link); //释放标签
            } else {
              //其他浏览器
              navigator.msSaveBlob(blob, fileName);
            }
          });
        })
        .catch(() => {
          Message({
            type: "info",
            message: "已取消导出",
          });
        });
    },

    // 每页数
    sizeChangeHandle(val) {
      this.pagedto.pageSize = val;
      this.getDataList();
      this.pageSize = val;
    },
    // 当前页
    currentChangeHandle(val) {
      this.pagedto.pageNum = val;
      this.getDataList();
    },
  },

  mounted() {
    this.getDataList();

    this.findAllName();
    //  this.sizeChangeHandle  (1)
    //  this.currentChangeHandle  (5)
  },
};
</script>
// <style lang="less" scoped>
@max1920: ~"(max-width: 1920px)";
.wrap {
  // width: 100%;
  .table {
    //min-height: 500px;
    .tiao {
      color: #fff;
      text-decoration: none;
    }
  }
}
.el-link {
  font-size: 12px;
}

.el-form-item {
  margin: 0 30px 20px 0 !important;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 250px !important;
}
</style>

